import React, { useState } from 'react';
import { Home } from './pages/Home';
import { Stats } from './pages/Stats';
// @ts-ignore - TypeScript无法正确识别此导入，但代码可以正常工作
import { Dashboard } from './pages/Dashboard';
import { HerbDetail } from './pages/HerbDetail';
import { Navigation } from './components/Navigation';
import './App.css';

export const App: React.FC = () => {
  const [activePage, setActivePage] = useState<string>('dashboard');
  const [selectedHerbId, setSelectedHerbId] = useState<string | null>(null);

  const handleNavigate = (page: string) => {
    setActivePage(page);
  };

  const handleHerbSelect = (herbId: string) => {
    setSelectedHerbId(herbId);
    setActivePage('herb-detail');
  };

  const handleBackFromHerbDetail = () => {
    setActivePage('home');
    setSelectedHerbId(null);
  };

  // TypeScript 类型断言帮助
  type ViewType = 'overview' | 'classification' | 'properties' | 'relations' | 'geographic' | 'textual';
  interface DashboardCompProps {
    initialView?: ViewType;
  }
  const DashboardComp = Dashboard as React.ComponentType<DashboardCompProps>;

  return (
    <div className="app">
      <Navigation activePage={activePage} onNavigate={handleNavigate} />
      <main className="app-main">
        {activePage === 'dashboard' && <DashboardComp />}
        {activePage === 'home' && <Home onHerbSelect={handleHerbSelect} />}
        {activePage === 'stats' && <Stats />}
        {activePage === 'map' && <DashboardComp initialView="geographic" />}
        {activePage === 'connections' && <DashboardComp initialView="relations" />}
        {activePage === 'herb-detail' && selectedHerbId && 
          <HerbDetail herbId={selectedHerbId} onBack={handleBackFromHerbDetail} />
        }
      </main>
    </div>
  );
};
